import React, {Component} from "react";
import Hello from "./components/Hello";
import Tab from "./components/Tab"

console.log("1")
export default class LayOut extends Component{
    constructor(props) {
        /**
         *   1.任务
         *      通过super 来将绑定在组件身上的 props 赋值给 this.props
         *      定义state
         *      普通函数定义时可以绑定 this 
         */
        console.log("constructor  1");
        super(props)
    }
    componentWillMount() {
        /**
         * 1.表示组件即将挂载，用于初始化事件 和 生命周期，白话，准备工作
         * 2.任务
         *      react 内部都完成任务，我们不干预
         * 3.这个钩子函数在 react 未来版本中是弃用的。
         * 4.数据是否拿到：  yes  数据请求、修改数据
         * 5.真实DOM是否拿到： NO
         */
        console.log("componentWillMount  2", document.querySelector("h3"));
    }
    render() {
        /**
         * 任务：
         *      1.底层  React.createElement
         *      2.解析  this.props 和 this.state
         *      3.将 jsx 元素渲染为vdom对象模型，也就意味着生成了vdom
         *  注意点：
         *      这个钩子函数中 是否可以使用 setState？  不能
         *      why？
         *          1.js 是单线程
         *          2.render函数：在解析state、props的同时又要改它数据，所以不行，会死循环了。
         */
        console.log("render  3")
        return (
            <div>
               <h3>11</h3>
            </div>
        )
    }
    componentDidMount() {
        /**
         * 1.表示组件挂载结束。
         *      挂载：是从 vdom 从虚拟dom 转到 真实的dom，真实的dom插入到页面当中。
         *  2.任务
         *      数据可以拿到  数据请求   数据修改
         *      真实dom可以拿到   真实dom操作/第三方库实例化
         */
        // document.querySelector("h3").style.background = 'red'
        console.log("componentDidMount  4");
    }
}

console.log("2")

// export default function LayOut() {
   
//     return(
//         <div>
//           <Hello />
//           <Tab />
//         </div>
//     )
// }